<script setup lang="ts">
</script>

<template>
  <div class="container">

    <van-image
        class="avatar"
        width="100vw"
        fit="contain"
        :src="ResourceGetter('bg.png')"
    />

    <div class="my-form">
      <slot name="default"></slot>
    </div>

  </div>

</template>

<style scoped>
@keyframes fadein {
  from {
    opacity: 0;
  }to{
     opacity: 1;
   }
}
.container{
  height: 100vh;
  position: relative;
  background-color: whitesmoke;
  overflow: auto;
}
.avatar {
  animation-name: fadein;
  animation-duration: 1.8s;
  animation-timing-function: ease-in;
}
.my-form{
  top:53%;
  position: absolute;
  width: 100%;
  opacity: 0.94;
}
</style>